<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<ui:composition template="/WEB-INF/qTemplate.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets" 
                xmlns:p="http://primefaces.org/ui"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                >

    <ui:define name="title">Media Page</ui:define>
    <ui:define name="content">
        <div id="main">
            <script>
                function refresh()
                {
                    location.reload(true);
                    location.reload(true);
                    location.reload(true);
                }
            </script>
            <div id="indexLeftColumn" >
                <ul> 
                    <li><a href="qCurrentTrip.xhtml">Current Trip</a></li>
                    <li><a href="qMyTrips.xhtml">My Trips</a></li> 
                    <li><a href="planTripInfo.xhtml">Plan A Trip</a></li>
                    <li><a href="qUploadPhotoList.xhtml">My Media></li>
                </ul> 
            </div>
            <div id="indexRightColumn">
                <html>
                    <h:body>
                        <h:form id="form" >
                            <p:fileUpload fileUploadListener="#{fileUploadBean.upload}"
                                          allowTypes="/(\.|\/)(gif|jpe?g|png)$/" sizeLimit="10000000"
                                          oncomplete="refresh()"/>
                        </h:form>
                        
                            <c:forEach var="image" items="${PersonalPhotoBean.images}">
                                <form style="width: 100px; height: 100px" method="post" action="FileDeleteServlet?imageName=#{image}">
                            <a href="img/galleria/#{image}"><img src="img/galleria/#{image}" width="100"/></a>
                            <input type="submit" class="button" value="X" name="#{image}" id="deleteButton"
                                   />
                                </form>
                            </c:forEach>
                        
                    </h:body>
                </html>

            </div>
        </div>
    </ui:define>
</ui:composition>
